<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<div style="padding: 20px;">
			<form id="form1">
				自定义验证规则
				<input type="text" name="jsf" blur-verify verify="required|min6" placeholder="verify验证blur-verify失焦验证" style="width: 200px;" />
				<span class="span40"></span>
				<input type="radio" name="x1" value="x1" checked="checked" disabled="disabled" /> 禁选默认选中
				<span class="span40"></span>
				<input type="radio" verify="required" name="x2" value="x2" /> 必选
				<span class="span40"></span>
				<input type="text" verify="required" name="x3" value="x3-1" /> 必选
				<span class="span40"></span>
				<input id="sbdm" type="text" name="x3" verify="required|minmax" minlength="3" maxlength="5" blur-verify verType="msg" /> 失焦也验证
				<span class="span40"></span>
				<select verify="required" name="x4">
					<option selected disabled>请选择</option>
					<optgroup label="Swedish Cars">
						<option>Volvo</option>
						<option value="02">Saab</option>
					</optgroup>
					<option value="03">Mercedes</option>
					<option value="04">Audi</option>
				</select> 必选
				<script type="text/javascript">
					setTimeout(function() {
						$('[name="x4"]').val('02');
					}, 2000)
				</script>
				<span class="span40"></span>
				<input id="date1" type="date" _type="date" name="x6" value="2018-05-14" min="2018-05-10" max="2018-05-20" blur-verify verify="required|dataRange" onchange="layer.alert('支持后添加change事件')" /> 必选(失焦也验证)
				<span class="span40"></span> <br /><br /> 开始结束:
				<br />
				<input id="start-1" type="date" _type="date" placeholder="开始时间" end="#end-1" verify="required" /> --
				<input id="end-1" type="date" _type="date" placeholder="结束时间" start="#start-1" verify="required" />时间没做失去焦点校验
				<br /><br />
				<input type="reset" value="重置" />
			</form>
			<br /><br />
			<div>
				<button type="button" onclick="open1()">在弹窗中用到form,弹窗按钮提交重置表单</button>
			</div>
			<br /><br />
			<div>
				<button type="button" onclick="verifyFn()">点击验证</button>
			</div>

			<script type="text/javascript">
				var verifyFn, open1;
				setTimeout(function() {
					//自定义验证规则
					verify.config({
						min6: function(val, dom) {
							if(val.length < 6) {
								return "必须为大于5个字"
							}
						}
					});

					//验证
					verifyFn = function() {
						var verifyB = verify('#form1');
						if(verifyB) {
							layer.msg('验证通过可以提交')
						} else {
							layer.msg('验证没通过')
						}
						console.log($('#form1').serializeArray());
						console.log($('#form1').serializeObj());
					};

					open1 = function() {
						layer.open({
							type: 1,
							async: true, //异步请求文件片段
							content: '../view-demo/verify-form.tpl', //文件地址
							area: ['50%', '50%'],
							btn: ['提交', '重置', '取消'],
							btn1: function(index) {
								if(verify('#form2')) {
									layer.msg('验证通过可以提交');
									$('#form2').trigger('submit');
									layer.close(index);
								} else {
									layer.msg('验证没通过,不能提交')
									return false;
								}
							},
							btn2: function() {
								$('#form2').trigger('reset');
								return false;
							}
						})
					};
				}, 1000)
			</script>
		</div>
	</body>

</html>